<template>
	<view>
		<view class="container">
			<s-tabs :tabs="tabs" :isFixed="scrollTop>=0" :currentTab="currentTab" selectedColor="#E41F19" sliderBgColor="#E41F19" @change="change"></s-tabs>
			 <view :class="{'s-order-list':scrollTop>=0}">
				<view class="s-order-item" v-for="(item,index) in list" :key="index">
					<s-list-cell :hover="false" :lineLeft="false">
						<view class="s-goods-title">
							<view>订单号：{{item.order_no}}</view>
							<view class="s-order-status" v-if="item.status==1">待付款</view>
							<view class="s-order-status" v-if="item.status==2">待发货</view>
							<view class="s-order-status" v-if="item.status==3">待收货</view>
							<view class="s-order-status" v-if="item.status==4">待评价</view>
							<view class="s-order-status" v-if="item.status==5">订单已取消</view>
							<view class="s-order-status" v-if="item.status==6">申诉中</view>
							<view class="s-order-status" v-if="item.status==7">申诉失败</view>
							<view class="s-order-status" v-if="item.status==8">申诉完成</view>
							<view class="s-order-status" v-if="item.status==9">已完成</view>
						</view>
					</s-list-cell>
					<block v-for="(it,ind) in item.order_info_to" :key="ind">
						<s-list-cell padding="0">
							<view class="s-goods-item">
								<image :src="it.product_to.image_url" class="s-goods-img"></image>
								<view class="s-goods-center">
									<view class="s-goods-name">{{it.product_to.name}}</view>
									<view class="s-goods-attr" v-if="it.specs">{{it.specs}}</view>
								</view>
								<view class="s-price-right">
									<view>单价：￥{{it.money}}</view>
									<view>邮费：￥{{it.postage}}</view>
									<view>x{{it.num}}</view>
								</view>
							</view>
						</s-list-cell>
					</block>
					<s-list-cell :hover="false" :last="true">
						<view class="s-goods-price">
							<view>共{{item.total_num}}件商品 合计：</view>
							<view class="s-size-24">￥</view>
							<view class="s-price-large">{{item.total_money}}</view>
						</view>
					</s-list-cell>
					<view class="s-order-btn">
						<view class="s-btn-ml" v-if="item.status==1">
							<s-button type="black" :plain="true" size="mini" shape="circle" @click="order_detail(item.id)">取消订单</s-button>
						</view>
						<view class="s-btn-ml" v-if="item.status==1">
							<s-button type="danger" :plain="true" size="mini" shape="circle" @click="order_detail(item.id)">立即支付</s-button>
						</view>
						<view class="s-btn-ml">
							<s-button type="black" :plain="true" size="mini" shape="circle" @click="order_detail(item.id)">订单详情</s-button>
						</view>
						<view class="s-btn-ml" v-if="item.status==3">
							<s-button type="danger" :plain="true" size="mini" shape="circle" @click="order_detail(item.id)">确认收货</s-button>
						</view>
						<view class="s-btn-ml" v-if="item.status==4">
							<s-button type="danger" :plain="true" size="mini" shape="circle" @click="order_evaluate(item.id)">去评价</s-button>
						</view>
						<view class="s-btn-ml" v-if="item.status==9||item.status==7">
							<s-button type="danger" :plain="true" size="mini" shape="circle" @click="order_complain(item.id)">申诉</s-button>
						</view>
					</view>
				</view>
			 </view>
			 <s-no-data v-if="list.length<=0&&moreData===false" :imgUrl="$s.config.getConfig('NoDataImgUrlA')">
			 	{{$s.config.getConfig('NoDataTitle')}}
			 </s-no-data>
			 <s-loadmore v-if="moreData"></s-loadmore>
			 <s-nomore v-if="list.length>0&&moreData===false"></s-nomore>
			 <s-scroll-top :scrollTop="scrollTop"></s-scroll-top>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				tabs: [{
					name: "全部"
				}, {
					name: "待付款"
				}, {
					name: "待发货"
				}, {
					name: "待收货"
				}, {
					name: "待评价"
				},
				{
					name:'售后'
				}],
				currentTab: 0,
				list:[],
				paging:null,
				moreData:true,
				scrollTop: 0
			}
		},
		onLoad(options) {
			if(options.status>=0){
				this.currentTab = options.status
			}
		},
		async onShow() {
			await this.getOrderList();
		},
		methods: {
			//切换tab
			async change(e) {
				if(this.currentTab != e.index){
					this.currentTab = e.index
					this.list = []
					this.moreData = true
					await this.getOrderList()
				}
			},
			// 查看详情
			async order_detail(id){
				return await this.$s.uniApi.navigateTo({url:'../order_detail/order_detail?id='+id})
			},
			//去评价
			async order_evaluate(id){
				return await this.$s.uniApi.navigateTo({url:'../order_evaluate/order_evaluate?id='+id})
			},
			//申诉
			async order_complain(id){
				return await this.$s.uniApi.navigateTo({url:'../order_complain/order_complain?id='+id})
			},
			//订单列表
			async getOrderList() {
				const paging =  this.$s.model.order.getOrderList({status:this.currentTab})
				this.paging = paging
				const res = await paging.getMoreData()
				if (!res) {
					return
				}
				this.list = res.accumulator
				this.moreData = res.moreData
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		//下拉刷新
		async onPullDownRefresh() {
			await this.getOrderList()
			uni.stopPullDownRefresh()
		},
		//上拉加载更多
		async onReachBottom() {
			const res = await this.paging.getMoreData()
			if(!res){
				return
			}
			this.list = res.accumulator
			this.moreData = res.moreData
		}
	}
</script>

<style lang="scss" scoped>
@import 'order.scss';
</style>
